<html>
<head>
	<title>Echarts - 树状图实例2</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script src="cjj/esl.js"></script>
	<script src="cjj/config.js"></script>
	<!-- <script src="cjj/jquery.min.js"></script> -->
</head>
<style>
html,body,#main {width: 100%;padding: 0;margin: 0;height: 100%;}
</style>
<body>
<div id="main"></div>
<script>
let data2 = {
	"name":"中国1",
	"value":1,
	"children":[
		{
			"name": "湖北",
			"value": 11,
			"children":[
				{"name": "武汉", "value": 111},
				{"name": "宜昌", "value": 112}
			]
		},
		{
			"name": "河南", 
			"value": 12,
			"children":[
				{"name": "郑州", "value": 121},
				{"name": "信阳", "value": 122}
			]
		}
	]
};

require(['echarts'], function(echarts) {
	var chart = echarts.init(document.getElementById('main'), null, {});
	
	chart.setOption({
		tooltip: {
			trigger: 'item',
			triggerOn: 'mousemove'
		},
	
		series: [{
			type: 'tree',
			id: '3',
			data: [data2],
	
			top: '1%',
			left: '7%',
			bottom: '1%',
			right: '20%',
			roam: true,
			symbolSize: 7,
			initialTreeDepth: -1,
	
			label: {
				position: 'left',
				verticalAlign: 'middle',
				align: 'right'
			},
	
			leaves: {
				label: {
					position: 'right',
					verticalAlign: 'middle',
					align: 'left'
				}
			},
	
			//expandAndCollapse: true,
			animationDuration: 550,
			animationDurationUpdate: 750
		}]
	});
});

</script>
</body>
</html>
